<template>
  <FlexBox v-if="data.type == 'flex'">
    <div v-for="(child, index) in data.children">
      {{ index }}
    </div>
  </FlexBox>
  <GridBox v-else
    :columns="data.columns"
    :rows="data.rows"
    :areas="data.areas"
    :column-gap="data.columnGap"
    :row-gap="data.rowGap"
    :border="data.border">
    <template v-for="(child, areaName) in data.children" #[areaName]>
      <FlexBox v-if="child.type == 'flex'">
        <div v-for="(child2, index) in data.children">
          {{ index }}
        </div>
      </FlexBox>
      <GridBox v-else
        :columns="child.columns"
        :rows="child.rows"
        :areas="child.areas"
        :column-gap="child.columnGap"
        :row-gap="child.rowGap"
        :border="child.border">
        <template #x="{areaName}">{{ areaName }}</template>
        <template #y="{areaName}">{{ areaName }}</template>
        <template #a="{areaName}">{{ areaName }}</template>
        <template #b="{areaName}">{{ areaName }}</template>
      </GridBox>
    </template>
  </GridBox>
</template>
<script setup lang="ts">
  import GridBox from './GridBox.vue';
  import FlexBox from './FlexBox.vue';
  import { ref } from 'vue';

  const props = defineProps<{data: any}>()
  const data = props.data
</script>